<template>
    <div class="main">
        <el-upload class="upload-demo" action="url" :on-preview="handlePreview" :on-remove="handleRemove"
            :before-remove="beforeRemove" :on-exceed="handleExceed" :file-list="fileList" :on-change="handleChange"
            :auto-upload="false">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xls,xlsx文件，且不超过500kb</div>
        </el-upload>
        <el-button @click="readExcel" type="primary">input文件输入框读取excel表格</el-button>
        <el-table :data="list" :border="true">
            <el-table-column prop="title" label="文章标题" width="280" />
            <el-table-column prop="litpic" label="文章图片地址" width="180" />
            <el-table-column prop="click" label="点击量" width="80" />
            <el-table-column prop="seo_description" label="文章描述" />
            <el-table-column prop="stock_count" label="收藏数" width="70" />
            <el-table-column prop="tempview" label="文章模板" width="120" />
            <el-table-column prop="add_time" label="发布时间" width="100" />
            <el-table-column prop="update_time" label="更新时间" width="100" />
        </el-table>
    </div>
</template>
<script>
import XLSX from "xlsx-style"
export default {
    data() {
        return {
            list: [],
            fileList: [],
            url: ''
        }
    },
    methods: {
        // 参考文献：https://blog.csdn.net/Bole6666666/article/details/133002239
        readExcel() {
            const that = this
            // console.log('有文件了吗',that.fileList)
            if (that.fileList.length == 0) {
                this.$message.error("请上传excel文件")
                return
            } else {
                const name = that.fileList[0].name
                // console.log(name)
                const reader = new FileReader();
                reader.onload = function (e) {
                    const data = e.target.result
                    const workbook = XLSX.read(data, { type: 'binary' });
                    console.log('workbook', workbook)
                    const worksheet = workbook.Sheets['我的第一个工作表']

                    const json=XLSX.utils.sheet_to_json(worksheet)
                    // for (let z in worksheet) {
                    //     if (z[0] === '!') continue;
                    //     console.log("!" + z + "=" + JSON.stringify(worksheet[z].v));
                    // }
                    that.list=json
                }
                reader.readAsBinaryString(that.fileList[0].raw)
            }
        },
        handleRemove(file, fileList) {
            this.fileList = []
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleChange(file, fileList) {
            console.log(fileList);

            this.fileList = fileList
        }
    }
}
</script>